<ul class="nav nav-tabs">
	<li ng-class="{'active':pagedata.op=='list'}"><a href="javascript:;" ng-click="access('list')">返回列表页</a></li>
	<li class="active"><a href="javascript:;" >设计</a></li>
	<a class="label label-primary r" style="padding:8px;margin-top:6px;border-radius: 4px" href="javascript:;" ng-click="post(pagedata.item,'design')">保存</a>
</ul>
<div id="editform" class="form-horizontal form">
<link rel="stylesheet" type="text/css" href="../core/resource/css/jinyunicon.css">
<link href="../core/resource/css/diy.css?v=2020" rel="stylesheet">
<style>
.table td span{display:inline-block;margin-top:4px;}
.table td input{margin-bottom:0;}
</style>
<script language="javascript">require(['underscore']);</script>
    <div class="row diy-page" style="height:100%;" ng-init="pagedata.index=-1;pagedata.basictype=0">
		<div class="col-md-4" style="overflow: auto;height:700px;width:23%;border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;margin-bottom:20px">
				<div class="form-group" style="padding-top:10px">
					<a class="jylabel jylabel-f60-0" ng-class="{'active':pagedata.basictype==0}" ng-click="pagedata.basictype=0" class="btn">展示组件</a>
					<a class="jylabel jylabel-f60-0" ng-class="{'active':pagedata.basictype==1}" ng-click="pagedata.basictype=1" class="btn">列表组件</a>
					<a class="jylabel jylabel-f60-0" ng-class="{'active':pagedata.basictype==2}" ng-click="pagedata.basictype=2" class="btn">表单组件</a>
				</div>
				<div class="diy-menu" ng-show="pagedata.basictype==0">
					<div class="navs">
						<div class="form-group-title" style="margin-bottom:0;border:0">展示组件</div>
						<div class="fui-icon-group col-3" style="border-left: 1px solid #ebebeb;">
							<div class="fui-icon-col external item" ng-repeat="nav in pagedata.navs0" ng-click="func.add(nav)">
								<div class="badge"></div>
								<div class="icon icon-green radius"><i class="icon jinyunicon {{nav.icon || 'icon-all'}}"></i></div>
								<div class="text">{{nav.title}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="diy-menu" ng-show="pagedata.basictype==1">
					<div class="navs">
						<div class="form-group-title" style="margin-bottom:0;border:0">列表组件</div>
						<div class="fui-icon-group col-3" style="border-left: 1px solid #ebebeb;">
							<div class="fui-icon-col external item" ng-repeat="nav in pagedata.navs1" ng-click="func.add(nav)">
								<div class="badge"></div>
								<div class="icon icon-green radius"><i class="icon jinyunicon {{nav.icon || 'icon-all'}}"></i></div>
								<div class="text">{{nav.title}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="diy-menu" ng-show="pagedata.basictype==2">
					<div class="navs">
						<div class="form-group-title" style="margin-bottom:0;border:0">表单组件</div>
						<div class="fui-icon-group col-3" style="border-left: 1px solid #ebebeb;">
							<div class="fui-icon-col external item" ng-repeat="nav in pagedata.navs2" ng-click="func.add(nav)">
								<div class="badge"></div>
								<div class="icon icon-green radius"><i class="icon jinyunicon {{nav.icon || 'icon-all'}}"></i></div>
								<div class="text">{{nav.title}}</div>
							</div>
						</div>
					</div>
				</div>
		</div>
		<div class="diy-left" style="height:700px;width:32%;border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;margin-bottom:20px">
			<div class="diy-phone">
				<div class="phone-head"></div>
				<div class="phone-body">
					<div ng-click="pagedata.edit=1;" class="phone-title" style="background: url(../core/resource/images/diy/white.png) center top / 100% no-repeat scroll '#333'; ">{{pagedata.item.design.setting.title}}</div>
					<div class="phone-main ui-sortable" id="phone" style="background-color: '#fff';">
						<div id="editor" style="background: url('') no-repeat;background-size:cover;min-height: 600px">
							
							<div ng-repeat="inav in pagedata.item.design.items track by $index" class="drag" ng-class="{'selected':pagedata.index==$index}" ng-click="pagedata.edit=2;pagedata.edithtml=sys_html('app_develop/plugin/edit/'+inav.name);pagedata.editdata=inav.params;pagedata.index=$index;">
                                <div class="btn-edit-del" ng-show="pagedata.index==$index" ng-click="pagedata.index=$index-1;pagedata.item.design.items.splice($index,1)"></div>
								<div ng-include="pagedata.showhtml(inav.name)" class="fe-mod-parent" ></div>
                            </div>
                            <div ng-if="pagedata.item.type==2" ng-include="pagedata.showhtml(pagedata.item.design.setting.list_setting.type)" ng-click="pagedata.edit=2;pagedata.edithtml=sys_html('app_develop/plugin/edit/'+pagedata.item.design.setting.list_setting.type);pagedata.editdata=pagedata.item.design.setting.list_setting;" class="fe-mod-parent"></div>
						</div>
						<div ng-show="pagedata.item.design.setting.show_menu==1" class="fui-navbar" ng-click="pagedata.edit=1;"  style="background:#fff">
							<a href="javascript:;" class="external nav-item" ng-repeat="menu in pagedata.item.design.menus.list">
								<span class="fa {{menu.icon}}"  style="color: {{pagedata.item.design.menus.icon_color || '#333'}};"></span>
								<span class="label" style="color: {{pagedata.item.design.menus.title_color || '#333'}};">{{menu.title}}</span>
							</a>
						</div>
					</div>
				</div>
				<div class="phone-foot"></div>
			</div>
		</div>
		<div class="col-md-4" style="overflow: auto;height:700px;width:45%;border-bottom: 1px solid #ddd;margin-bottom:20px">
				<div class="diy-editor" ng-if="pagedata.edit==2">
						<div class="inner" >
							<div style="min-height:350px" ng-include="pagedata.edithtml" onload="start()"></div>
						</div>
				</div>
				<div class="diy-editor" ng-if="pagedata.edit==1">
						<div class="inner" >
							<div class="form-group-title">页面基本信息</div>
								<div class="form-group">
									<div class="col-sm-2 control-label">标题</div>
									<div class="col-sm-10">
										<input class="fe-panel-editor-input1" ng-model="pagedata.item.design.setting.title" />
									</div>
								</div>
							<div ng-if="pagedata.item.type==2">
							<div class="form-group-title">列表参数设置</div>
							
								<div class="form-group">
									<div class="col-sm-2 control-label">列表模版</div>
									<div class="col-sm-10">
										<label ng-repeat="(value,dtitle) in pagedata.list_templates" style="cursor:pointer; margin-right: 10px;"><input type="radio" value="{{value}}" ng-model="pagedata.item.design.setting.list_setting.type" />{{dtitle}}</label>
										
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-2 control-label">每页显示数据条数</div>
									<div class="col-sm-10">
										<input class="fe-panel-editor-input1" ng-model="pagedata.item.design.setting.list_setting.page_num" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label">指定选项卡字段</label>
									<div class="col-sm-10">
										<select class="form-control" ng-model="pagedata.item.design.setting.list_setting.tab_field">
											<option value="" selected>不显示选项卡</option>
											<option ng-repeat="op in pagedata.table_fields[0].fields" ng-selected="pagedata.item.design.setting.list_setting.tab_field==op.name" value="{{op.name}}" >{{op.title}}</option>
										</select>
									</div>
								</div>
							</div>
							<div ng-if="pagedata.item.type==5">
							<div class="form-group-title">表单参数设置</div>
							
								
								<div class="form-group">
									<div class="col-sm-2 control-label">提交按钮文字</div>
									<div class="col-sm-10">
										<input class="fe-panel-editor-input1" ng-model="pagedata.item.design.setting.submit_text" />
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-2 control-label">背景颜色</div>
									<div class="col-sm-8">
										<div class="input-group input-group-sm">
											<input class="form-control input-sm diy-bind color" ng-model="pagedata.item.design.setting.submit_color" type="color" />
											<span  class="input-group-addon">{{pagedata.item.designsetting.submit_color || 'red'}}</span>
										</div>
									</div>
								</div>
							</div>
							<div>
							<div class="form-group-title">底部菜单设置</div>
								<div class="form-group">
									<div class="col-sm-2 control-label">是否显示</div>
									<div class="col-sm-10">
										<label style="cursor:pointer; margin-right: 10px;"><input type="radio" value="1" ng-model="pagedata.item.design.setting.show_menu" /> 显示</label>
										<label style="cursor:pointer; margin-right: 10px;"><input type="radio" value="0" ng-model="pagedata.item.design.setting.show_menu" /> 不显示</label>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-2 control-label">图标颜色</div>
									<div class="col-sm-8">
										<div class="input-group input-group-sm">
											<input class="form-control input-sm diy-bind color" ng-model="pagedata.item.design.menus.icon_color" type="color" />
											<span  class="input-group-addon">{{pagedata.item.design.menus.background || '#fff'}}</span>
										</div>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-2 control-label">字体颜色</div>
									<div class="col-sm-8">
										<div class="input-group input-group-sm">
											<input class="form-control input-sm diy-bind color" ng-model="pagedata.item.design.menus.title_color" type="color" />
											<span  class="input-group-addon">{{pagedata.item.design.menus.background || '#333'}}</span>
										</div>
									</div>
								</div>
								
								<div class="form-items indent">
									<div class="inner" ng-init="checkarray(pagedata.item.design.menus,'list')">
										<div class="item" ng-repeat="menu in pagedata.item.design.menus.list">
											<span class="btn-del" title="删除" ng-click="pagedata.item.design.menus.list.splice($index,1)"></span>
											<div class="item-body">
												<div class="item-image square">
													<div class="icon-main">
														<span class="fa {{menu.icon}}"></span>
													</div>
													<div class="text" ng-click="modal_func(menu,'icon','tools.icon')">选择图标</div>
												</div>
												<div class="item-form">
													<div class="input-group" style="margin-bottom:0px; ">
														<span class="input-group-addon">文字</span>
														<input type="text" class="form-control input-sm diy-bind" ng-model="menu.title" placeholder="留空则不显示" maxlength="20">
													</div>
													<div class="input-group" style="margin-top:10px; margin-bottom:0px; ">
														<input type="text" class="form-control input-sm diy-bind" placeholder="请选择链接或输入链接地址" ng-model="menu.url">
														<span class="input-group-addon btn btn-info" ng-click="pagedata.choose_url(menu,'url')">选择链接</span>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="btn btn-w-m btn-block btn-info btn-outline" ng-click="pagedata.item.design.menus.list.push({'text':'按钮文字'});"><i class="fa fa-plus"></i> 添加一个</div>
								</div>
								
							</div>
						</div>

						
				</div>
		</div>
			
    </div>
</div>
<div id="floating-content-choose"  class="modal fade"  tabindex="-1" style="z-index:1039;display:none">
    <div class="jinyun-modal-dialog modal-dialog" style='width: 920px;'>
        <div class="modal-content">
            <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button><h3>选择字段</h3></div>
			<div class="modal-body form-horizontal">
				<ul class="nav nav-tabs" ng-show="!pagedata.choose_sun">
					<li ng-class="{'active':pagedata.current_fields==fields.fields}" ng-repeat="fields in pagedata.table_fields"><a href="javascript:;" ng-click="pagedata.current_fields=fields.fields">{{fields.title}}</a></li>
				</ul>
				<table class="table jinyun-table table-hover vertical-middle jinyun-form">
					<thead class="navbar-inner">
						<tr>
							<th class="text-left">字段标识</th>
							<th class="text-left">字段名</th>
							<th class="text-right" style="word-break : break-all;">操作</th>
						</tr>
					</thead>
						<tr ng-repeat="item in pagedata.current_fields">
							<td>{{item.name}}</td>
							<td>{{item.title}}</td>
							<td class="text-right">
								<a href="javascript:;" ng-click="pagedata.choose_result(item.data)" class="btn btn-primary">选取</a>
							</td>
						</tr>
				</table>
			</div>
            <div class="modal-footer"><a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">完成</a></div>
        </div>
    </div>
</div>
<div id="floating-content-link"  class="modal fade"  tabindex="-1" style="z-index:1039;display:none">
    <div class="jinyun-modal-dialog modal-dialog" style='width: 920px;'>
        <div class="modal-content">
            <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button><h3>选择跳转页面</h3></div>
			<div class="modal-body form-horizontal">
				
				<table class="table jinyun-table table-hover vertical-middle jinyun-form">
					<thead class="navbar-inner">
						<tr>
							<th class="text-left">页面标识</th>
							<th class="text-left">页面名称</th>
							<th class="text-right" style="word-break : break-all;">选择页面动作</th>
						</tr>
					</thead>
						<tr ng-repeat="item in pagedata.pages">
							<td>{{item.name}}</td>
							<td>{{item.title}}</td>
							<td class="text-right">
								<a href="javascript:;" ng-repeat="op in item.ops" ng-click="pagedata.link_result(op.url)" class="btn btn-primary">{{op.title}}</a>
							</td>
						</tr>
				</table>
			</div>
            
        </div>
    </div>
</div>
<div id="floating-content-op_edit"  class="modal fade"  tabindex="-1" style="z-index:1000;display:none">
    <div class="jinyun-modal-dialog modal-dialog" style='width: 920px;'>
        <div class="modal-content">
            <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button><h3>设置动作</h3></div>
			<div class="modal-body form-horizontal">
				<div class="form-group">
					<label class="col-xs-12 col-sm-3 col-md-2 left-label">动作标识</label>
					<div class="col-xs-12 col-sm-8 col-lg-9">
						<input type="text" class="form-control " ng-model="pagedata.op_edit.name"  />
						<div class="help-block">设置动作标识，只能由数字、字母、下划线组成</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-12 col-sm-3 col-md-2 left-label">动作名称</label>
					<div class="col-xs-12 col-sm-8 col-lg-9">
						<input type="text" class="form-control " ng-model="pagedata.op_edit.title"  />
						<div class="help-block">设置动作名称</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-12 col-sm-3 col-md-2 left-label">动作类型</label>
					<div class="col-xs-12 col-sm-8 col-lg-9">
						<div class="radio radio-inline" ng-repeat="(value,dtitle) in pagedata.extra_op_types">
							<label>
								<input type="radio" value="{{value}}" ng-model="pagedata.op_edit.type"/>{{dtitle}}
							</label>
						</div>
						<div class="help-block">选择动作类型</div>
					</div>
				</div>
				<div class="form-group" ng-show="pagedata.op_edit.type==7">
					<label class="col-xs-12 col-sm-3 col-md-2 left-label">修改字段</label>
					<div class="col-xs-12 col-sm-8 col-lg-9">
						<div class="input-group">
							<input type="text" class="form-control {moreclass}" placeholder="选择字段"  ng-model="pagedata.op_edit.field_name"/>
							<span class="input-group-btn">
								<button class="btn btn-primary" type="button" ng-click="choose_field(pagedata.op_edit,'field_name')"><i class="fa fa-external-link"></i>选择字段</button>
							</span>
						</div>
						<div class="help-block"></div>
					</div>
				</div>
				<div class="form-group" ng-show="pagedata.op_edit.type==7">
					<label class="col-xs-12 col-sm-3 col-md-2 left-label">修改值</label>
					<div class="col-xs-12 col-sm-8 col-lg-9">
						<input type="text" class="form-control " ng-model="pagedata.op_edit.field_value"  />
						<div class="help-block">设置该动作修改将指定字段修改为何值，不填默认由前端传回</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-12 col-sm-3 col-md-2 left-label">成功后跳转</label>
					<div class="col-xs-12 col-sm-8 col-lg-9">
						<input type="text" class="form-control " ng-model="pagedata.op_edit.url"  />
						<div class="help-block">设置成功后跳转地址，不填则不跳转。支持系统标准url书写格式</div>
					</div>
				</div>
			</div>
            <div class="modal-footer"><a href="javascript:;" ng-click="pagedata.op_design_res()" class="btn btn-primary">确定</a></div>
        </div>
    </div>
</div>
<script type="text/javascript">
scope.pagedata.edit =1;

	window.scope.func.add=function(nav){
		//console.log(nav);
		window.scope.pagedata.edit=2;
		//window.scope.pagedata.used_navs[nav.cloud_id]={'showhtml':nav.showhtml,'edithtml':nav.edithtml};
		var new_item={'name':nav.name};
		new_item.params=scope.pagedata.defaults[nav.name] || {};
		new_item.params.type=nav.name;
		window.scope.pagedata.index+=1;
		window.scope.pagedata.item.design.items.splice(window.scope.pagedata.index,0,new_item);
		window.scope.pagedata.edithtml=scope.sys_html('app_develop/plugin/edit/'+nav.name);
		window.scope.pagedata.editdata=window.scope.pagedata.item.design.items[window.scope.pagedata.index].params;
		//console.log(window.scope.pagedata.editdata);
	}
	scope.pagedata.choose_field=function(obj,field,father){
		scope.pagedata.choose_current_obj=obj;
		scope.pagedata.choose_current_field=field;
		if(father){
			scope.pagedata.choose_sun=true;
			scope.pagedata.current_fields=scope.pagedata.sun_tables[father].fields;
		}else{
			scope.pagedata.choose_sun=false;
			scope.pagedata.current_fields=scope.pagedata.table_fields[0].fields;
		}
		console.log('准备弹出模态框');
		window.bootstrap('#floating-content-choose').modal();
	}
	scope.pagedata.choose_result=function(data){
		scope.pagedata.choose_current_obj[scope.pagedata.choose_current_field]=data;
		window.bootstrap('#floating-content-choose').modal('hide');
	}
	scope.pagedata.showhtml=function(name){
		if(!name){
			return false;
		}
		return scope.sys_html('app_develop/plugin/show/'+name);
	}
	scope.pagedata.op_design=function(value,field,op_name){
		scope.pagedata.current_opvalue=value;
		scope.pagedata.current_opfield=field;
		if(!scope.pagedata.item.design.ops){
			scope.pagedata.item.design.ops={};
		}
		if(op_name && scope.pagedata.item.design.ops[op_name]){
			scope.pagedata.edit_op=scope.pagedata.item.design.ops[op_name];
		}else{
			scope.pagedata.edit_op={};
		}
		window.bootstrap('#floating-content-op_edit').modal();
	}
	scope.pagedata.op_design_res=function(){
		if(!scope.pagedata.edit_op.name){
			alert('请输入标识');return false;
		}
		var key='$('+scope.pagedata.edit_op.name+')';
		scope.pagedata.item.design.ops[key]=scope.pagedata.edit_op;
		scope.pagedata.current_opvalue[scope.pagedata.current_opfield]=key;
		window.bootstrap('#floating-content-op_edit').modal('hide');
	}
	window.scope.pagedata.choose_url=function(value,field){
		scope.pagedata.current_opvalue=value;
		scope.pagedata.current_opfield=field;
		window.bootstrap('#floating-content-link').modal();
	}
	window.scope.pagedata.link_result=function(res){
		scope.pagedata.current_opvalue[scope.pagedata.current_opfield]=res;
		window.bootstrap('#floating-content-link').modal('hide');
	}
</script>
<script type="text/javascript">
require(['sortable'],function(Sortable){
	var byId = function (id) { return document.getElementById(id); };
	Sortable.create(byId('editor'), {
		animation: 150,
		draggable:'.drag',
		handle: '.drag',
		onEnd: function (evt) {
			var item=scope.pagedata.item.items.splice(evt.oldIndex,1);
			scope.pagedata.item.items.splice(evt.newIndex,0,item[0]);
		}
	});
	
});
</script>